<template>
  <div id="app">
    <el-container>
      <!--抬头开始-->
      <el-header style="background-color: #253B76;margin:-11px -11px -11px -11px" height="80px">
        <div class="center" >
          <el-row gutter="10" >
            <el-col span="6">
              <img src="http://rww08uahf.hn-bkt.clouddn.com/964a0f20e41b4303959890fe8c2231be.png" width="196" height="55"
              style="margin-top: 10px">
            </el-col>
            <el-col span="10">
              <h1s style="font-size: 30px;color: white;position: relative;top: 20px;left: 40%">Kun吧后台管理中心</h1s>
            </el-col>
            <el-col span="6">
            </el-col>
            <el-col span="2" style="position: relative;left: 20%">
              <el-popover v-if="manager==null"
                  placement="top-start"
                  title="欢迎来到kun吧"
                  width="200"
                  trigger="hover"
                  content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。">
                <div slot="reference">
                  <i class="el-icon-user" style="font-size: 30px;
                  margin-top:25px;margin-left: 40px;color: whitesmoke"></i>
                </div>

                <el-button style="background-color: #3c32fb;color: white"><a href="Management.html" style="color: white;text-decoration: none">登录</a></el-button>
              </el-popover>
                <el-popover v-else
                            placement="top-start"
                            title="尊敬的管理员，欢迎您！"
                            width="200"
                            trigger="hover"
                            append-to-body>
                    <div slot="reference" >

                            <el-avatar :src="manager.avatar" style="font-size: 35px;position: relative;margin:20px 20px;"></el-avatar>

                    </div>
                    <div style="text-align: center">

                            <el-avatar :src="manager.avatar"></el-avatar>
                        <h1 style="margin: 0">{{ manager.nickname }}</h1>
                        <p v-if="manager.username==='admin'">超级管理员</p>
                        <hr>


                        <a href="javascript:void(0)" @click="logout()">退 出 登 录</a><br>

                    </div>
                </el-popover>
            </el-col>
          </el-row>
        </div>
      </el-header>
      <!--抬头结束-->
      <el-main style="margin-top: 70px;position: absolute">
        <div style="margin: 0 auto">
          <el-row gutter="10">
            <el-col span="24">

              <div style="width: 1500px;height: 650px;position: relative;bottom:20px;right: 10px" >
                <el-tabs style="background-color:white;height: 650px;" type="card">
                  <!--用户管理开始-->
                  <el-tab-pane label="用户管理"
                               @tab-click="selectAllUser()"
                  ><template>
                    <template>
                      <el-button type="info" @click="selectAllUser()"
                                 icon="el-icon-search" size="medium" style="margin-left: 20px"
                      >全部</el-button>
                      <el-input style="width: 200px;margin-left: 20px" placeholder="请输入搜索的关键字"
                                v-model="UserKeyword">
                        <el-button slot="append" icon="el-icon-search"
                                   @click="selectUserByKeyword(UserKeyword)"
                        ></el-button>
                      </el-input>
                      <el-table
                          ref="tableUserData"
                          :data="tableUserData"
                          tooltip-effect="light"
                          style="width: 100%"
                          height="530"
                      >
                        <el-table-column
                            type="index"
                            label="序号"
                            width="50">
                        </el-table-column>
                        <el-table-column
                            prop="avatar"
                            label=""
                            width="50"
                        ><template slot-scope="scope">
                          <img :src='scope.row.avatar' style="border-radius: 100px;margin-left: 10px" width="40px" alt="图片" >
                        </template>
                        </el-table-column>
                        <el-table-column
                            prop="username"
                            label="用户"
                            width="100"
                        >
                        </el-table-column>
                        <el-table-column
                            prop="nickname"
                            label="昵称"
                            width="100"
                        >
                        </el-table-column>
                        <el-table-column
                            prop="phoneNumber"
                            label="电话号码"
                            width="120"
                        >
                        </el-table-column>
                        <el-table-column
                            prop="birthday"
                            label="生日"
                            width="120"
                        >
                        </el-table-column>
                        <el-table-column
                            prop="state"
                            label="状态"
                            width="50"
                            align="center"
                        >
                        </el-table-column>
                        <el-table-column
                            prop="described"
                            label="个性签名"
                            width="200"
                        >
                        </el-table-column>
                        <el-table-column
                            prop="level"
                            label="等级"
                            width="50"
                        >
                        </el-table-column>
                        <el-table-column
                            label="地区"
                            prop="area"
                            width="60"
                        >
                        </el-table-column>

                        <el-table-column
                            prop="createTime"
                            label="创建时间"
                            width="220"
                            show-overflow-tooltip>
                        </el-table-column>
                        <el-table-column label="操作">
                          <template slot-scope="scope">
                            <el-button type="danger" @click="deleteUserById(scope.row.id)"
                                       icon="el-icon-delete" size="medium"
                                       circle="true"></el-button>
                            <el-button type="info"
                                       size="mini"
                                       @click="selectUserById(scope.row.id)">详情</el-button>
                            <el-button type="primary"
                                       size="mini"
                                       @click="UserPower(scope.row)">升级权限</el-button>
                          </template>
                        </el-table-column>

                      </el-table>
                      <div style="margin-top: 20px">
                        <el-button type="text" style="float: right;margin-right: 50px"
                        ><a href="index.html">首页<i class="el-icon-house" style="size:30px"></i></a></el-button>

                      </div>
                    </template>
                  </template></el-tab-pane>
                  <!-- 用户管理结束-->
                  <!--博客管理开始-->
                  <el-tab-pane label="博客管理"><template>
                    <el-button type="info" @click="selectAllBlog()"
                               icon="el-icon-search" size="medium" style="margin-left: 20px"
                    >全部</el-button>
                    <el-input v-model="blogKeyword" style="width: 200px;margin-left: 20px" placeholder="请输入搜索的关键字">
                      <el-button slot="append" icon="el-icon-search" @click="selectBlogByKeyword(blogKeyword)"></el-button>
                    </el-input>
                    <el-table
                        ref="multipleTable"
                        :data="this.tableBlogData"
                        tooltip-effect="dark"
                        style="width: 100%;"
                        @selection-change="handleSelectionChange"
                        height="483">
                      <el-table-column
                          type="index"
                          label="序号"
                          width="50">
                      </el-table-column>
                      <el-table-column
                          label="用户Id"
                          prop="userId"
                          width="120">
                      </el-table-column>
                      <el-table-column
                          label="博客id"
                          prop="id"
                          width="120">
                      </el-table-column>
                      <el-table-column
                          prop="blogTitle"
                          label="博客标题"
                          width="120">
                      </el-table-column>
                      <el-table-column
                          prop="blogTypeId"
                          label="博客类型"
                          width="120">
                      </el-table-column>
                      <el-table-column
                          prop="blogCreateTime"
                          label="博客发布时间"
                          show-overflow-tooltip>
                      </el-table-column>
                      <el-table-column label="操作">
                        <template slot-scope="scope">
                          <el-button type="danger" @click="deleteBlogById(scope.row.id)"
                                     icon="el-icon-delete" size="medium"
                                     circle="true"></el-button>
                          <el-button type="info"
                                     size="mini"
                                     @click="selectBlogById(scope.row.id)">博客详情</el-button>
                          <el-button type="info" size="mini"
                                     @click="selectAllReplyByBlogId(scope.row.id)"> 评论管理</el-button>
                          <el-dialog title="评论管理" :visible.sync="dialogTableVisible"
                                     width="1100px" top="80px" center="true" >
                            <!--评论管理开始-->
                            <el-table
                                ref="multipleTable"
                                :data="tableReplyData"
                                tooltip-effect="dark"
                                style="width: 100%;"
                                @selection-change="handleSelectionChange"
                                height="500">
                              <el-table-column
                                  type="index"
                                  label="序号"
                                  width="50">
                              </el-table-column>
                              <el-table-column
                                  prop="id"
                                  label="ID"
                                  width="120">
                              </el-table-column>
                              <el-table-column
                                  prop="userId"
                                  label="用户Id"
                                  width="120">
                              </el-table-column>
                              <el-table-column
                                  prop="blogId"
                                  label="博客ID"
                                  width="120">
                              </el-table-column>
                              <el-table-column
                                  prop="parentId"
                                  label="parentID"
                                  width="120">
                              </el-table-column>
                              <el-table-column
                                  prop="content"
                                  label="内容"
                                  width="120">
                              </el-table-column>
                              <el-table-column
                                  prop="createTime"
                                  label="发布时间"
                                  show-overflow-tooltip>
                              </el-table-column>
                              <el-table-column label="操作">
                                <template slot-scope="scope">
                                  <el-button type="danger" @click="deleteReplyById(scope.row)"
                                             icon="el-icon-delete" size="medium"
                                             circle="true"></el-button>
                                </template>
                              </el-table-column>
                            </el-table>
                          </el-dialog>
                          <!--评论管理结束-->
                        </template>
                      </el-table-column>
                    </el-table>
                    <div style="margin-top: 20px">
                      <el-button type="text" style="float: right;margin-right: 50px"
                      ><a href="index.html">返回首页</a></el-button>
                    </div>
                  </template>
                  </el-tab-pane>
                  <!--博客管理结束-->
                  <!--活动管理开始-->
                  <el-tab-pane label="活动管理">
<!--                    <el-button type="info" @click="selectEvent()"
                               icon="el-icon-search" size="medium"
                    >全部</el-button>-->
                    <el-button type="info" @click="dialogFormVisible=true"
                               icon="el-icon-circle-plus-outline" size="medium" style="margin-left: 20px"
                    >添加</el-button>
                    <el-dialog title="新建活动" :visible.sync="dialogFormVisible"
                               width="800px" top="80px" center="true" >
                      <!--新建活动开始-->
                      <el-form :model="newEventForm" :rules="rules" ref="newEventForm" label-width="100px">
                        <el-form-item label="开始时间" prop="startTime">
                          <div class="block">
                            <el-date-picker
                                v-model="newEventForm.startTime"
                                type="datetime"
                                style="width: 400px"
                                value-format="yyyy-MM-dd HH:mm:ss"
                                placeholder="选择日期时间">
                            </el-date-picker>
                          </div>
                        </el-form-item>
                        <el-form-item label="结束时间" prop="endTime">
                          <div class="block">
                            <el-date-picker
                                style="width: 400px"
                                v-model="newEventForm.endTime"
                                type="datetime"
                                value-format="yyyy-MM-dd HH:mm:ss"
                                placeholder="选择日期时间">
                            </el-date-picker>
                          </div>
                        </el-form-item>
                        <el-form-item label="库存量" prop="inv">
                          <el-input v-model.number="newEventForm.inv" style="width: 400px" ></el-input>
                        </el-form-item>
                        <el-form-item label="活动介绍" prop="introduce">
                          <el-input v-model="newEventForm.introduce" style="width: 600px" ></el-input>
                        </el-form-item>
                        <el-form-item label="积分数量" prop="eachNumber">
                          <el-input v-model.number="newEventForm.eachNumber" style="width: 400px" ></el-input>
                        </el-form-item>
                        <el-form-item>
                          <el-button type="primary" @click="createNewEvent('newEventForm')"
                                     style="margin-left: 200px"
                          >立即创建</el-button>
                        </el-form-item>
                      </el-form>
                    </el-dialog>
                    <!--新建活动结束-->
                    <el-table
                        ref="multipleTable"
                        :data="tableIntegralData"
                        tooltip-effect="dark"
                        style="width: 100%;"
                        height="483">
                      <el-table-column
                          type="index"
                          label="序号"
                          width="50">
                      </el-table-column>
                      <el-table-column
                          prop="id"
                          label="ID"
                          width="80">
                      </el-table-column>
                      <el-table-column
                          prop="startTime"
                          label="开始时间"
                          width="170">
                      </el-table-column>
                      <el-table-column
                          prop="endTime"
                          label="结束时间"
                          width="170">
                      </el-table-column>
                      <el-table-column
                          prop="inv"
                          label="库存"
                          width="100">
                      </el-table-column>
                      <el-table-column
                          prop="introduce"
                          label="介绍"
                          width="300">
                      </el-table-column>
                      <el-table-column
                          prop="eachNumber"
                          label="积分"
                          width="100"
                          show-overflow-tooltip>
                      </el-table-column>
                      <el-table-column label="操作">
                        <template slot-scope="scope">
                          <el-button type="danger" @click="deleteEvent(scope.row.id)"
                                     icon="el-icon-delete" size="medium"
                                     circle="true"></el-button>
                          <el-button type="info" @click="updateEventId(scope.row)"
                                     icon="el-icon-edit" size="medium"
                                     circle="true">
                          </el-button>
                          <!--更新活动开始-->
                          <el-dialog title="活动更新" :visible.sync="dialogEventVisible" width="800px">
                            <el-form :model="eventObj" :rules="rules" ref="eventObj" label-width="100px">
                              <el-form-item label="开始时间" prop="startTime">
                                <div class="block">
                                  <el-date-picker
                                      v-model="eventObj.startTime"
                                      type="datetime"
                                      style="width: 400px"
                                      value-format="yyyy-MM-dd HH:mm:ss"
                                      placeholder="选择日期时间">
                                  </el-date-picker>
                                </div>
                              </el-form-item>
                              <el-form-item label="结束时间" prop="endTime">
                                <div class="block">
                                  <el-date-picker
                                      style="width: 400px"
                                      v-model="eventObj.endTime"
                                      type="datetime"
                                      value-format="yyyy-MM-dd HH:mm:ss"
                                      placeholder="选择日期时间">
                                  </el-date-picker>
                                </div>
                              </el-form-item>
                              <el-form-item label="库存量" prop="inv">
                                <el-input v-model.number="eventObj.inv" style="width: 400px" ></el-input>
                              </el-form-item>
                              <el-form-item label="活动介绍" prop="introduce">
                                <el-input v-model="eventObj.introduce" style="width: 600px" ></el-input>
                              </el-form-item>
                              <el-form-item label="积分数量" prop="eachNumber">
                                <el-input v-model.number="eventObj.eachNumber" style="width: 400px" ></el-input>
                              </el-form-item>
                              <el-form-item>
                                <el-button type="primary" @click="updateEvent('eventObj')"
                                           style="margin-left: 200px"
                                >更新</el-button>
                              </el-form-item>
                            </el-form>
                          </el-dialog>
                          <!--更新活动结束-->
                        </template>
                      </el-table-column>
                    </el-table>
                  </el-tab-pane>
                  <!--http://rww08uahf.hn-bkt.clouddn.com/964a0f20e41b4303959890fe8c2231be.png管理开始-->
                  <el-tab-pane label="头衔管理" >
                    <el-button type="info" @click="dialogTitleVisibe=true"
                               icon="el-icon-circle-plus-outline" size="medium" style="margin-left: 20px"
                    >添加</el-button>
                    <el-dialog title="新建头衔" :visible.sync="dialogTitleVisibe"
                               width="800px" top="80px" center="true" >
                      <!--新建头衔开始-->
                      <el-form :model="TitleFormData" :rules="TitleFormRules1" ref="TitleFormData" label-width="100px">
                        <el-form-item label="头衔名称" prop="titleName">
                          <el-input v-model="TitleFormData.titleName" style="width: 400px" ></el-input>
                        </el-form-item>
                        <el-form-item prop="image" label="头衔样式" >
                          <el-upload
                              :auto-upload="false"
                              :limit="limitCount"
                              :on-remove="handleRemove"
                              :on-change="onChange"
                              :on-success="handleSuccess"
                              :file-list="fileList"
                              :before-upload="beforeAvatarUpload"
                              action="#"
                              name='file'
                              class="avatar-uploader"
                              list-type="picture-card"
                              accept="image/jpg,image/jpeg,image/png">
                            <img v-if="url" :src="url" class="el-upload-list__item-thumbnail"></img>
                            <i v-else slot="default" class="el-icon-plus" />
                          </el-upload>
                        </el-form-item>
                        <el-form-item label="积分需求" prop="integralRequire">
                          <el-input v-model.number="TitleFormData.integralRequire" style="width: 400px" ></el-input>
                        </el-form-item>
                        <el-form-item label="状态" prop="stat">
                          <el-input v-model.number="TitleFormData.stat" style="width: 400px" ></el-input>
                        </el-form-item>
                        <el-form-item>
                          <el-button type="primary" @click="createNewTitle('TitleFormData')"
                                     style="margin-left: 200px"
                          >创建</el-button>
                        </el-form-item>
                      </el-form>
                    </el-dialog>
                    <!--新建头衔结束-->
                    <template>
                      <el-table :data="TitleData" height="483"  style="width: 100%">
                        <el-table-column prop="id" label="Id" width="100"></el-table-column>
                        <el-table-column prop="titleName" label="头衔标题" width="180"></el-table-column>
                        <el-table-column prop="image" label="样式" >
                          <template slot-scope="scope">
                            <img :src='scope.row.image' style="border-radius: 100px;margin-left: 10px" width="40px" >
                          </template>
                        </el-table-column>
                        <el-table-column prop="integralRequire" label="积分需求"></el-table-column>
                        <el-table-column prop="stat" label="状态"></el-table-column>
                        <el-table-column label="操作">
                          <template slot-scope="scope">
                            <el-button type="danger" @click="deleteTitle(scope.row.id)"
                                       icon="el-icon-delete" size="medium"
                                       circle="true"></el-button>
                            <el-button type="info" @click="updateTitleId(scope.row)"
                                       icon="el-icon-edit" size="medium"
                                       circle="true">
                            </el-button>
                            <!--更新头衔开始-->
                            <el-dialog title="更新头衔" :visible.sync="dialogUpdataTitleVisibe"
                                       width="800px" top="80px" center="true" >
                              <el-form :model="TitleFormObj" :rules="TitleFormRules1" ref="TitleFormObj" label-width="100px">
                                <el-form-item label="头衔名称" prop="titleName">
                                  <el-input v-model.number="TitleFormObj.titleName" style="width: 400px" ></el-input>
                                </el-form-item>
                                <el-form-item prop="image" label="头衔样式" >
                                  <el-upload
                                      :auto-upload="false"
                                      :limit="limitCount"
                                      :on-remove="handleRemove"
                                      :on-change="onChange"
                                      :on-success="handleSuccess"
                                      :file-list="fileList"
                                      :before-upload="beforeAvatarUpload"
                                      action="#"
                                      name='file'
                                      class="avatar-uploader"
                                      list-type="picture-card"
                                      accept="image/jpg,image/jpeg,image/png">
                                    <img v-if="url" :src="url" class="el-upload-list__item-thumbnail"></img>
                                    <i v-else slot="default" class="el-icon-plus" />
                                  </el-upload>
                                </el-form-item>
                                <el-form-item label="积分需求" prop="integralRequire">
                                  <el-input v-model.number="TitleFormObj.integralRequire" style="width: 400px" ></el-input>
                                </el-form-item>
                                <el-form-item label="状态" prop="stat">
                                  <el-input v-model.number="TitleFormObj.stat" style="width: 400px" ></el-input>
                                </el-form-item>
                                <el-form-item>
                                  <el-button type="primary" @click="updateTitle('TitleFormObj')"
                                             style="margin-left: 200px"
                                  >创建</el-button>
                                </el-form-item>
                              </el-form>
                            </el-dialog>
                            <!--更新头衔结束-->
                          </template>
                        </el-table-column>
                      </el-table>
                    </template>
                  </el-tab-pane>
                  <!--头衔管理结束-->
                  <!--设备状态开始-->
                  <el-tab-pane label="设备状态" >
                    <el-row :gutter="20">
                      <el-col :span="8">
                        <el-card style="width: 600px;margin-left: 100px" shadow="always">
                          <el-descriptions title="cpu" column="1" border="true">
                            <el-descriptions-item label="核心数">{{ this.cpuData.cpuNum }}</el-descriptions-item>
                            <el-descriptions-item label="用户使用率">{{ this.cpuData.used }}%</el-descriptions-item>
                            <el-descriptions-item label="系统使用率">{{ this.cpuData.sys }}%</el-descriptions-item>
                            <el-descriptions-item label="当前空闲率">{{ this.cpuData.free }}%</el-descriptions-item>
                          </el-descriptions>
                        </el-card>
                      </el-col>
                      <el-col :span="10">
                        <el-card style="width: 600px;margin-left: 250px" shadow="always">
                          <el-descriptions title="内存" column="1" border>
                            <el-descriptions-item label="总内存">{{this.memoryData.total}}G</el-descriptions-item>
                            <el-descriptions-item label="已用内存">{{this.memoryData.used}}G</el-descriptions-item>
                            <el-descriptions-item label="剩余内存">{{this.memoryData.free}}G</el-descriptions-item>
                            <el-descriptions-item label="使用率">{{this.memoryData.usage}}%</el-descriptions-item>
                          </el-descriptions>
                        </el-card>
                      </el-col>
                    </el-row>
                    <el-row :gutter="10">
                      <el-col :span="8"><el-card style="width: 1255px;margin-left: 100px;margin-top: 25px" shadow="always">
                        <el-descriptions title="服务器信息" column="2" border>
                          <el-descriptions-item label="服务器名称">{{ this.serverData.computerName }}</el-descriptions-item>
                          <el-descriptions-item label="操作系统">{{ this.serverData.osName }}</el-descriptions-item>
                          <el-descriptions-item label="服务器IP">{{ this.serverData.computerIp}}</el-descriptions-item>
                          <el-descriptions-item label="系统架构">{{ this.serverData.osArch }}</el-descriptions-item>
                        </el-descriptions>
                      </el-card></el-col>
                    </el-row>
                    <el-row :gutter="10">
                      <el-col :span="8"><el-card style="width: 1255px;margin-left: 100px;margin-top: 25px" shadow="always">
                        <el-descriptions title="java虚拟机信息" column="2" border>
                          <el-descriptions-item label="java名称">{{ this.javaJVMData.name }}</el-descriptions-item>
                          <el-descriptions-item label="java版本">{{this.javaJVMData.version  }}</el-descriptions-item>
                          <el-descriptions-item label="运行时长">{{ this.javaJVMData.runTime }}</el-descriptions-item>
                          <el-descriptions-item label="启动时间">{{ this.javaJVMData.startTime }}</el-descriptions-item>
                          <el-descriptions-item label="安装路径">{{ this.javaJVMData.home  }}</el-descriptions-item>
                          <el-descriptions-item label="运行参数">{{ this.javaJVMData.inputArgs }}</el-descriptions-item>
                        </el-descriptions>
                      </el-card></el-col>
                    </el-row>

                    <el-row :gutter="10">
                      <el-col :span="8"><el-card style="width: 1255px;margin-left: 100px;margin-top: 25px" shadow="always">
                        <h1 style="margin-top: -5px;font-size: 16px">磁盘状态</h1>
                        <template >
                          <el-table
                              :data="diskData"
                              border
                              style="width: 100%;">
                            <el-table-column
                                prop="dirName"
                                label="盘符路径"
                                stripe="true"
                                width="230">
                            </el-table-column>
                            <el-table-column
                                prop="sysTypeName"
                                label="盘符类型"
                                width="180">
                            </el-table-column>
                            <el-table-column
                                prop="total"
                                label="总大小"
                            width="180">
                            </el-table-column>
                            <el-table-column
                                prop="used"
                                label="已用大小"
                                width="180">
                            </el-table-column>
                            <el-table-column
                                prop="free"
                                label="可用大小"
                                width="180">
                            </el-table-column>
                            <el-table-column
                                prop="usage"
                                label="已用百分比"
                                width="180"
                            >
                            </el-table-column>
                          </el-table>
                        </template>
                      </el-card></el-col>
                    </el-row>
                  </el-tab-pane>
                  <!--设备状态结束-->
                  <!--管理员管理开始-->
                  <el-tab-pane label="管理员管理"
                  ><template>
                    <template>
                      <el-button type="info" @click="selectManager()"
                                 icon="el-icon-search" size="medium" style="margin-left: 20px"
                      >全部</el-button>
                      <el-table
                          ref="tableUserData"
                          :data="tableManagerData"
                          tooltip-effect="light"
                          style="width: 100%"
                          height="530"
                      >
                        <el-table-column
                            type="index"
                            label="序号"
                            width="50">
                        </el-table-column>
                        <el-table-column
                            prop="avatar"
                            label=""
                            width="50"
                        ><template slot-scope="scope">
                          <img :src='scope.row.avatar' style="border-radius: 100px;margin-left: 10px" width="40px" alt="图片" >
                        </template>
                        </el-table-column>
                        <el-table-column
                            prop="username"
                            label="用户"
                            width="100"
                        >
                        </el-table-column>
                        <el-table-column
                            prop="nickname"
                            label="昵称"
                            width="100"
                        >
                        </el-table-column>
                        <el-table-column
                            prop="phoneNumber"
                            label="电话号码"
                            width="120"
                        >
                        </el-table-column>
                        <el-table-column
                            prop="birthday"
                            label="生日"
                            width="120"
                        >
                        </el-table-column>
                        <el-table-column
                            prop="state"
                            label="状态"
                            width="50"
                            align="center"
                        >
                        </el-table-column>
                        <el-table-column
                            prop="described"
                            label="个性签名"
                            width="200"
                        >
                        </el-table-column>
                        <el-table-column
                            prop="level"
                            label="等级"
                            width="50"
                        >
                        </el-table-column>
                        <el-table-column
                            label="地区"
                            prop="area"
                            width="60"
                        >
                        </el-table-column>

                        <el-table-column
                            prop="createTime"
                            label="创建时间"
                            width="220"
                            show-overflow-tooltip>
                        </el-table-column>
                        <el-table-column label="操作">
                          <template slot-scope="scope">
                            <el-button type="danger"
                                       size="mini"
                                       @click="deleteManager(scope.row.id)">删除管理员</el-button>
                          </template>
                        </el-table-column>

                      </el-table>
                      <div style="margin-top: 20px">
                        <el-button type="text" style="float: right;margin-right: 50px"
                        ><a href="index.html">首页<i class="el-icon-house" style="size:30px"></i></a></el-button>

                      </div>
                    </template>
                  </template></el-tab-pane>
                </el-tabs>

              </div>
            </el-col>

          </el-row>
        </div>
      </el-main>
    </el-container>
  </div>
</template>


<script>
import {number} from "@/views/put/edit/js/echarts";
import axios from "axios";
import '@/api/request'

export default {

  data: function () {
    return {
        manager :localStorage.Manager ? JSON.parse(localStorage.Manager) : null,
      limitCount: 1,
      ImageUrl: '',
      TitleData:[],
      TitleFormObj:{id:'',titleName:'',image:'',integralRequire:'',stat:''},
      TitleFormData:{titleName:'',image:'',integralRequire:'',stat:''},
      blogKeyword:'',
      eventKeyword:'',
      diskData:[{dirName:'',sysTypeName:'',typeName:'',total:'',free:'',used:'',usage:''}],
      javaJVMData:{total:'',max:'',free:'',version:'',home:'',name:'',startTime:'',usage:'',used:'',runTime:'',inputArgs:''},
      serverData:{computerName:'',computerIp:'',userDir:'',osName:'',osArch:''},
      cpuData:{cpuNum:'',total:'',sys:'',used:'',wait:'',free:''},
      memoryData:{total:'',used:'',free:'',usage:''},
      keyword:"",
      checked: "",
      UserKeyword:'',
      tabPosition: 'left',
      img:'',
      TitleFormRules1: {titleName:[{ type: 'string', required: true, message: '此内容必填', trigger: 'change' }],
        image:[{  required: true, message: '请添加图片', trigger: 'change' }],
        integralRequire:[{ type: 'number', required: true, message: '请输入数字内容', trigger: 'change' }],
        stat:[]
      },
      rules:{
        startTime:[ { type: 'string', required: true, message: '请选择开始时间', trigger: 'change' }],
        endTime:[ { type: 'string', required: true, message: '请选择结束时间', trigger: 'change' }],
        inv:[{  required: true, message: '请输入库存', trigger: 'blur' },
          {type: 'number',message: '库存格式错误',trigger: 'blur' }],
        introduce:[{required: true, message: '请输入活动内容',trigger:'blur'},
          {min:3,max:20,message: '长度在3到20个字符以内',trigger: 'blur'}
        ],
        eachNumber:[{ required: true, message: '请输入积分数量', trigger: 'blur' },
          {type: 'number',message: '积分数量格式错误',trigger: 'blur' }]
      },
      tableBlogData: [],
      tableUserData: [],
      tableReplyData:[],
      tableManagerData:[],
      tableIntegralData:[],
      eventObj:{id:'',startTime:'',endTime:'',inv:'',introduce: '',eachNumber:''},
      newEventForm:{startTime:'',endTime:'',inv:'',introduce: '',eachNumber:''},
      dialogTableVisible:false,
      dialogFormVisible:false,
      dialogEventVisible:false,
      dialogTitleVisibe:false,
      dialogUpdataTitleVisibe:false,
      input:"",
      onChangeImgUrl: '',
      fileList: [],
      blogImg: "",
      timer: null,

    }
  },
  mounted() {
      const Manager=localStorage.Manager ? JSON.parse(localStorage.Manager) : null;
      if (Manager==null){
          alert('对不起，你无权访问该页面，请先登录管理员！');
          window.location.href = "Management.html"
      }
// 每隔5分钟定时刷新
    this.timer = setInterval(() => {
      this.selectServer();
    }, 3000)
  },
  beforeDestroy() {
    clearInterval(this.timer);
  },
  watch: {
    onChangeImgUrl: {
      handler(newName) {
        var aa = document.querySelector('.el-upload--picture-card')
        if (newName) {
          aa.style.display = 'none'
        } else {
          setTimeout(() => {
            aa.style.display = 'inline-block'
          }, 1100)
        }
      }
    }
  },
  methods: {
    /*管理员权限升级*/
    UserPower(row){
      let url ='http://localhost:8088/manager/setManager/'
      axios.post(url,row).then((response)=>{

        if (response.data.code=1){
          this.$message.success(response.data.data)
          this.selectManager()
        }
          else{
              this.$message.error(response.data.msg)
          }
      })
    },
    /*删除管理员*/
    deleteManager(id){
      this.$confirm('此操作将永久删除该管理员, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let url='http://localhost:8088/manager/delete/'
        axios.delete(url+id).then( (response)=>{
          if (response.data.code===1){
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            this.selectManager();
          }else {
              this.$message.error(response.data.msg)
          }
        })
      }).catch(() => {
      });
    },
    /*查询管理员*/
    selectManager(){
      let url = 'http://localhost:8088/manager/list'
      axios.get(url).then( (response)=>{
        if (response.data.code===1){
          if( response.data.data ==''){
            this.$message.info("暂无管理员")
          }
          this.tableManagerData =response.data.data;
        }else{
          alert("服务器异常")
        }
      })
    },

      // 退出登录
      logout() {
          if (confirm("您确认退出登录吗?")) {
              //发请求退出登录
              let url = 'http://localhost:8088/manager/logout'
              axios.post(url).then( (res)=> {
                  if (res.data.code===1){
                      localStorage.clear();
                      this.$message.success(res.data.data)
                      window.location.href = "Management.html"
                  }

              })
          }
      },
    /*更新头衔*/
    updateTitleId(row){
      this.dialogUpdataTitleVisibe =true
      this.TitleFormObj =row
    },
    /*更新头衔1.0*/
    updateTitle(TitleFormObj){
      this.$refs[TitleFormObj].validate((valid) => {
        if (valid) {
          let url = 'http://localhost:8088/title/update'
          axios.put(url,this.TitleFormObj).then((response)=>{
            if (response.data.code===1){
              this.$message.success("更新成功")
              this.resetForm(TitleFormObj)
              this.dialogUpdataTitleVisibe=false
              this.selectTitle();
            }
            else this.$message.error("更新失败");
          })
        } else {
          this.$message.warning("错误，请重新输入")
          this.resetForm(TitleFormObj)
          return false;
        }
      });
    },
    /*删除头衔*/
    deleteTitle(id){
      this.$confirm('此操作将永久删除该头衔, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let url='http://localhost:8088/title/delete/'
        axios.delete(url+id).then( (response)=>{
          if (response.data.code===1){
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            this.selectTitle();
          }
        })
      }).catch(() => {
      });
    },
    /*新建头衔*/
    createNewTitle(TitleFormData){
      this.$refs[TitleFormData].validate((valid) => {
        if (valid) {
          let url = 'http://localhost:8088/title/save'
          axios.post(url,this.TitleFormData).then((response)=>{
            if (response.data.code===1){
              this.$message.success("添加成功")
              this.resetForm(TitleFormData)
              this.dialogTitleVisibe=false
              this.selectTitle();
            }
            else this.$message.error("添加失败");
          })
        } else {
          this.$message.warning("错误，请重新输入")
          this.resetForm(TitleFormData)
          return false;
        }
      });
    },

    /*查询所有头衔*/
    selectTitle(){
      const token = this.manager
      let url='http://localhost:8088/title/list'
      axios.get(url).then((response)=>{
        if (response.data.code===1){
          this.TitleData = response.data.data;
        }
        else this.$message.info("暂无头衔")
      }).then()
    },
    /*查询博客按关键词*/
    selectBlogByKeyword(key){
      if (key!==''){
        this.blogKeyword=''
        let url= 'http://localhost:8088/blog/queryByTime/'
        axios.get(url+key).then((response)=>{
          if (response.data.code===1){
            this.tableBlogData=[]
            this.tableBlogData=response.data.data
          }
          else this.$message.info("暂无数据")
        })
      }
      else this.$message.error("你还是输入点东西吧")
    },
    /*查询服务器状态*/
    selectServer(){
      let url = 'http://localhost:8088/server'
      axios.get(url).then((response)=>{
        if (response.data.code===1){
          this.cpuData = response.data.data.cpu
          this.memoryData = response.data.data.mem
          this.javaJVMData = response.data.data.jvm
          this.serverData = response.data.data.sys
          this.diskData = response.data.data.sysFiles
        }
        else  this.$message.error("服务器异常")
      })
    },
    /*进入更新活动交界面*/
    updateEventId(userIntegral){
      this.dialogEventVisible=true
      this.eventObj = userIntegral
    },
    /*更新活动*/
    updateEvent(eventObj){
      this.$refs[eventObj].validate((valid1) => {
        if (valid1) {
          let url = 'http://localhost:8088/userIntegral/put'
          axios.put(url,this.eventObj).then((response)=>{
            if (response.data.code===1){
              this.$message.success("更新成功")
              this.resetForm(eventObj)
              this.dialogEventVisible=false
              this.selectEvent();
            }
            else this.$message.error("更新失败");
          })
        } else {
          this.$message.warning("错误，请重新输入")
          this.resetForm(eventObj)
          return false;
        }
      });
    },
    /*重置表单*/
    resetForm(newEventForm){
      this.$refs[newEventForm].resetFields();
    },
    /*创建新的活动*/
    createNewEvent(newEventForm){

      this.$refs[newEventForm].validate((valid) => {
        if (valid) {
          let url = 'http://localhost:8088/userIntegral/add'
          axios.post(url,this.newEventForm).then((response)=>{
            if (response.data.code===1){
              this.$message.success("添加成功")
              this.resetForm(newEventForm)
              this.dialogFormVisible=false
              this.selectEvent();
            }
            else this.$message.error("添加失败");
          })
        } else {
          this.$message.warning("错误，请重新输入")
          this.resetForm(newEventForm)
          return false;
        }
      });
    },
    /*删除活动*/
    deleteEvent(id){
      this.$confirm('此操作将永久删除该活动, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let url='http://localhost:8088/userIntegral/deleteById/'
        axios.delete(url+id).then( (response)=>{
          if (response.data.code===1){
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
            this.selectEvent();
          }
        })
      }).catch(() => {
      });
    },
    /*查询所有积分活动*/
    selectEvent() {
      let url = 'http://localhost:8088/userIntegral/listOfAll'
      axios.get(url).then((response)=>{
        if (response.data.code===1){
          if( response.data.data ==''){
            this.tableIntegralData=[]
            this.$message.info("暂无活动")
          }
          else this.tableIntegralData = response.data.data;
        } else this.$message.error("服务异常")
      })
    },
    /*删除用户*/
    deleteUserById(id) {
      this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let url='http://localhost:8088/user/delete/'
        axios.delete(url+id).then( (response)=>{
          if (response.data.code===1){
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            this.selectAllUser();
          }
        })
      }).catch(() => {
      });
    },
    /*删除博客*/
    deleteBlogById(id) {
      this.$confirm('此操作将永久删除该博客, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let url = 'http://localhost:8088/blog/deleteBlog/'
        axios.delete(url+id).then( (response)=>{
          if (response.data.code===1){
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            this.selectAllBlog();
          }
        })
      }).catch(() => {
      });
    },
    /*按照博客ID查询所有评论*/
    selectAllReplyByBlogId(id){
      this.dialogTableVisible = true;
      let url = 'http://localhost:8088/blogReply/selectAllReplyByBlogId/'
      axios.get(url+id).then((response)=>{
        if (response.data.code===1){
          this.tableReplyData = response.data.data;
        }
        else this.$message.error("服务异常")
      })
    },
    /*按id删除评论*/
    deleteReplyById(reply){
      this.$confirm('此操作将删除该评论及其所有子评论, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'info'
      }).then(() => {
        let url = 'http://localhost:8088/blogReply/delete/'
        axios.post(url+reply.id).then((response)=>{
          if (response.data.code===1){
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            this.selectAllReplyByBlogId(reply.blogId);
          }
        })
      }).catch(() => {
      });
    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },

    /*查询所有博客*/
    selectAllBlog(){
      let url = 'http://localhost:8088/blog/selectAllBlog'
      axios.get(url).then((response)=>{
        if (response.data.code===1){
          if( response.data.data ==''){
            this.$message.info("暂无博客")
          }
          this.tableBlogData =response.data.data;
        }
        else this.$message.error("服务异常");
      })

    },
/*按关键词查用户*/
    selectUserByKeyword(key){
      if(key ==''){
        this.$message.error("你输你妹哦，没数据我怎么查？？")
      }else{
        this.UserKeyword=''
        let url = 'http://localhost:8088/user/queryByKey/'
        axios.get(url+key).then( (response)=>{
          if (response.data.code==1){
            this.tableUserData=[]
            this.tableUserData =response.data.data
          }
          else this.$message.error("未查询到相关用户")
        })}

    },
    /*查询用户，进入个人主页*/
    selectUserById(id){
      localStorage.setItem('userId', id);
      window.location.href = "otherUserCenter.html"
    },
    /*按照Id查询进入博客*/
    selectBlogById(id){
      localStorage.setItem('id', id);
      window.location.href = "detail.html"
    },
    /*查询所有用户*/
    selectAllUser(){
      let url = 'http://localhost:8088/user/list'
      axios.get(url).then( (response)=>{
        if (response.data.code===1){
          if( response.data.data.list ==''){
            this.$message.info("暂无用户")
          }
          this.tableUserData =response.data.data.list;
        }else{
          alert(response.data.code)
        }
      })
    },
    onChange(file) {
      console.log(file)
      // debugger
      let formData = new FormData();
      formData.append("file", file.raw);
      axios.post('http://localhost:8088/qiniu/uploadImg',formData, {
        headers: {
          'Content-Type': 'multipart/form-data'
        },
      }).then((res) =>{
        if (res.data.code==1){
          this.$message('上传成功')
          this.onChangeImgUrl = res.data.data
          this.TitleFormData.image=this.onChangeImgUrl
        }else {
            this.$message(res.data.msg)
        }
      });
    },
    handleRemove(file, fileList) {
      this.onChangeImgUrl = ''
    },
    handleSuccess(res, file) {
      this.onChangeImgUrl=res.data
    },
    // 限制图片大小
    beforeAvatarUpload(file) {
      const isLt5M = file.size / 1024 / 1024 < 5
      if (!isLt5M) {
        this.$message.error('上传头像图片大小不能超过 5MB!')
      }
      return isLt5M
    }
  },
  created() {
    this.selectServer()
    this.selectAllUser()
    this.selectAllBlog()
    this.selectEvent()
    this.selectTitle()
    this.selectManager()
  }
}
</script>
<style>
.el-message {
    top: 100px !important;
}

</style>

